<template>
  <div class="container">
    <el-button slot="reference" type="primary" v-if="user.role == 0 || (user.role == 1 && form.noticeType == 1)"
               style="float: left;position: relative;left: 10px; width: 200px;margin-bottom: 20px"
               @click="addDialogVisible = true">发布{{ form.noticeType == 0 ? "院校" : "班级" }}通知
    </el-button>

    <el-button slot="reference" type="primary"
               style="float: right;position: relative;right: 10px; width: 200px;margin-bottom: 20px"
               @click="$router.go(-1)">返回
    </el-button>


    <el-table
        :data="tableData"
        border
        style="">
      <el-table-column
          fixed
          prop="noticeTitle"
          label="通知标题"
          height="10"
          width="200">
      </el-table-column>
      <el-table-column
          prop="noticeContent"
          label="通知内容"
          width="520">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.noticeContent">
            <div class="cell">{{ scope.row.noticeContent }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="发布时间"
                       width="245">
        <template slot-scope="scope">
          {{ dateFormat(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间"
                       width="245">
        <template slot-scope="scope">
          {{ dateFormat(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="success"
              @click="detail(scope.row)">查看详情
          </el-button>
          <el-button
              size="mini"
              type="warning"
              v-if="user.role == 0 || (user.role == 1 && form.noticeType == 1)"
              @click="update(scope.row)">修改
          </el-button>
          <el-button
              size="mini"
              type="danger"
              v-if="user.role == 0 || (user.role == 1 && form.noticeType == 1)"
              @click="remove(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改通知" :visible.sync="updateDialogVisible" width="50%" @close="updateDialogVisible = false">
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="通知标题">
          <el-input v-model="form.noticeTitle"></el-input>
        </el-form-item>
        <el-form-item label="通知正文">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 100}"
              placeholder="请输入内容"
              v-model="form.noticeContent">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="cancelUpdate()">取 消</el-button>
          <el-button type="primary" @click="comfirmUpdate()">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 详情弹框 -->
    <el-dialog :title="dialogTitle" :visible="detailDialogVisible" @close="detailDialogVisible = false">
      <div>{{ dialogContent }}</div>
    </el-dialog>
    <!--添加弹框-->
    <el-dialog title="添加通知" :visible.sync="addDialogVisible" width="50%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="通知标题">
          <el-input v-model="form.noticeTitle"></el-input>
        </el-form-item>
        <el-form-item label="通知正文">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 100}"
              placeholder="请输入内容"
              v-model="form.noticeContent">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="cancelAdd()">取 消</el-button>
          <el-button type="primary" @click="comfirmAdd()">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination style="margin-top: 20px;float: right"
                   background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   @current-change="page">
    </el-pagination>
  </div>

</template>

<script>
export default {
  name: "DailyManagement",
  data() {
    return {
      addDialogVisible: false,
      updateDialogVisible: false,
      detailDialogVisible: false,
      dialogContent: '',
      dialogTitle: '',
      tableData: null,
      pageSize: 7,
      total: null,
      user: JSON.parse(localStorage.getItem("user")),

      form: {
        noticeTitle: '',
        noticeContent: '',
        noticeId: '',
        userId: '',
        noticeType: this.$route.query.noticeType,
      },
    }
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    page(currentPage) {
      const _this = this;
      if (_this.form.noticeType === 0) {
        axios.get('http://localhost:8080/notice/listGlobal/' + currentPage + '/' + +_this.pageSize).then(function (res) {
          _this.tableData = res.data.data.content
          _this.pageSize = res.data.data.size
          _this.total = res.data.data.total
          console.log(res);
        })
      } else if (_this.form.noticeType === 1) {
        axios.get('http://localhost:8080/classes/findNoticeByClassId/' + _this.$route.query.classIdid + '/' + currentPage + '/' + _this.pageSize).then(function (res) {
          _this.tableData = res.data.data.content
          _this.pageSize = res.data.data.size
          _this.total = res.data.data.total
          console.log(res);
        })
      }
    },
    detail(row) {
      this.dialogContent = row.noticeContent;
      this.dialogTitle = row.noticeTitle;
      this.detailDialogVisible = true;
    },
    update(row) {
      this.form.noticeTitle = row.noticeTitle;
      this.form.noticeContent = row.noticeContent;
      this.form.noticeId = row.noticeId;
      this.form.userId = row.userId;
      this.form.noticeType = row.noticeType;
      this.updateDialogVisible = true;
    },
    comfirmUpdate() {
      const _this = this
      axios.put('http://localhost:8080/notice/update', _this.form).then(function (resp) {
        if (resp.data.code == -1) {
          _this.$alert('通知【' + _this.form.noticeTitle + '】修改失败', '错误', {
            confirmButtonText: '确定'
          });
          _this.updateDialogVisible = false;
        }
        if (resp.data.code == 0) {
          _this.$alert('通知【' + _this.form.noticeTitle + '】修改成功', '成功', {
            confirmButtonText: '确定',
            callback: action => {
              location.reload()
            }
          });
        }
      })
    },
    cancelUpdate() {
      //关闭
      this.updateDialogVisible = false;
      //清零
      this.form.noticeTitle = '';
      this.form.noticeContent = '';
    },
    remove(row) {
      const _this = this
      this.$confirm('确认删除通知【' + row.noticeTitle + '】吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('http://localhost:8080/notice/delete/' + row.noticeId).then(function (resp) {
          if (resp.data.code == -1) {
            _this.$alert('通知【' + row.noticeTitle + '】删除失败', '错误', {
              confirmButtonText: '确定'
            });
          }
          if (resp.data.code == 0) {
            _this.$alert('通知【' + row.noticeTitle + '】删除成功', '成功', {
              confirmButtonText: '确定',
              callback: action => {
                location.reload()
              }
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    //确认增加
    , comfirmAdd() {
      let _this = this;
      if (_this.form.noticeType === 0) {
        //全局通知
        //添加
        axios.post(
            'http://localhost:8080/notice/addGlobal',
            {
              noticeContent: _this.form.noticeContent,
              noticeTitle: _this.form.noticeTitle,
              userId: _this.user.userId
            }).then(function (res) {
          if (res.data.code == -1) {
            _this.$alert('通知【' + _this.form.noticeTitle + '】添加失败', '错误', {
              confirmButtonText: '确定'
            });
            _this.addDialogVisible = false
          }
          if (res.data.code == 0) {
            _this.$alert('通知【' + _this.form.noticeTitle + '】添加成功', '成功', {
              confirmButtonText: '确定',
              callback: action => {
                location.reload()
                //关闭
                _this.addDialogVisible = false;
                _this.form.noticeTitle = '';
                _this.form.noticeContent = '';
              }
            });
          }
        })
      } else if (_this.form.noticeType === 1) {
        var form = {
          noticeContent: _this.form.noticeContent,
          noticeTitle: _this.form.noticeTitle,
          classIdid: _this.classIdid,
          userId: _this.user.userId
        }
        console.log(form)
        //班级添加
        axios.post(
            'http://localhost:8080/classes/addClassNotice'
            , {
              noticeContent: _this.form.noticeContent,
              noticeTitle: _this.form.noticeTitle,
              classIdid: _this.$route.query.classIdid,
              userId: _this.user.userId
            }).then(function (res) {
          if (res.data.code == -1) {
            _this.$alert('通知【' + _this.form.noticeTitle + '】添加失败', '错误', {
              confirmButtonText: '确定'
            });
            _this.addDialogVisible = false
          }
          if (res.data.code == 0) {
            _this.$alert('通知【' + _this.form.noticeTitle + '】添加成功', '成功', {
              confirmButtonText: '确定',
              callback: action => {
                location.reload()
                //关闭
                _this.addDialogVisible = false;
                _this.form.noticeTitle = '';
                _this.form.noticeContent = '';
              }
            });
          }
        })
      }
    }
    //取消增加
    , cancelAdd() {
      //关闭
      this.addDialogVisible = false;
      //清零
      this.form.noticeTitle = '';
      this.form.noticeContent = '';
    }
  },
  created() {
    const _this = this;
    _this.form.noticeType = parseInt(_this.$route.query.noticeType);

    console.log(_this.form.noticeType)
    console.log(typeof _this.form.noticeType)
    if (_this.form.noticeType === 0) {
      axios.get('http://localhost:8080/notice/listGlobal/1/' + _this.pageSize).then(function (res) {
        _this.tableData = res.data.data.content
        _this.pageSize = res.data.data.size
        _this.total = res.data.data.total
        console.log("全局通知");
        console.log(res);
      })
    } else if (_this.form.noticeType === 1) {
      axios.get('http://localhost:8080/classes/findNoticeByClassId/' + _this.$route.query.classIdid + '/1/' + +_this.pageSize).then(function (res) {
        _this.tableData = res.data.data.content
        _this.pageSize = res.data.data.size
        _this.total = res.data.data.total
        console.log("班级通知");
        console.log(res);
      })
    }
  }
}
</script>
<style scoped>
.container {
  margin: 10px auto;
  /*margin: 10px;*/
  width: 90%;
  /*border: 10px solid red;*/
  box-shadow: 0 20px 120px 0 rgb(69, 176, 255);
  padding: 30px 50px;
  text-align: center;
  height: 85%;
}

.el-table {
  width: 100%;
  /*border-radius: 10px;*/
  box-shadow: 0 2px 12px 0 rgb(69, 176, 255);
  /*border: 2px solid #ccc;*/
  text-align: center;
}
</style>
